<template>
  <el-watermark v-if="isShow" :content="content" :font="font" class="waterBox">
    <router-view />
  </el-watermark>
  <router-view v-else />
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings"
import useUserStore from "@/store/modules/user"
import { handleThemeStyle } from "@/utils/theme"
const { proxy } = getCurrentInstance()
const settingStore = useSettingsStore()
const userStore = useUserStore()

const version = process.env.VITE_APP_VERSION
const font = ref({
  color: "rgba(0,0,0,0.15)"
})
const content = ref([])
const isShow = ref(false)
consolelog("版本", version)
let timer = null
// 监听用户名称获取之后添加水印
watch(
  () => userStore.userInfo.nickName,
  value => {
    if (value) {
      isShow.value = true
      if (timer) clearInterval(timer)
      content.value = [value, proxy.parseTime(new Date()), "version:" + version]
    } else {
      isShow.value = false
      timer && clearInterval(timer)
    }
  },
  { immediate: true }
)

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(settingStore.theme)
  })
})
</script>
<style scoped>
.waterBox {
  width: 100vw;
  height: 100vh;
}
</style>
